import React, { Component } from 'react';
import { Dispatch, AnyAction } from 'redux';
import Header from './Header';
import styles from './index.css';
import { connect } from 'dva';
import { ConnectState, UserInfo } from '@/models/connect';
import { getToken } from '@/utils/cookie';
import WsMessage from './WsMessage';
import Menu from './Menu';
import { RouteComponentProps } from 'react-router-dom';
interface LayoutProps extends RouteComponentProps {
  dispatch: Dispatch<AnyAction>;
  user: UserInfo;
}

interface LayoutState {}

@connect(({ user }: ConnectState) => ({
  user: user.user,
}))
class BasicLayout extends Component<LayoutProps, LayoutState> {
  constructor(props: LayoutProps) {
    super(props);
    this.state = {
      userName: '',
    };
  }
  async componentDidMount() {
    const { dispatch } = this.props;
    await dispatch({ type: 'user/getUser' });
    dispatch({
      type: 'systemDevice/menuListBySystemId',
      payload: {
        systemId: localStorage.getItem('surSystemId')
      },
    })
    const { user } = this.props;
    const ws = new WebSocket(
      `${process.env.WS_BASE_API}/v1/websocket/${user.surLoginName}?token=${getToken()}`
    );
    ws.onmessage = event => {
      dispatch({ type: 'user/addWsMessage', payload: JSON.parse(event.data) });
    };
  }
  render() {
    const { match } = this.props;
    return (
      <div className={this.props.location.pathname !== '/home' ? styles.layout : styles.layoutHome}>
        <Header />
        <div className={styles.content}>
          {/* <TransitionGroup>
            <CSSTransition key={location.pathname} classNames="fade" timeout={300}> */}
              {this.props.children}
            {/* </CSSTransition>
          </TransitionGroup> */}
        </div>
        <WsMessage />
        <Menu />
      </div>
    );
  }
}

export default BasicLayout;
